{% load static thumbnail compress cache %}<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock title %}</title>
    <link id="changeLink" rel="shortcut icon" type="image/x-icon" href="https://img.kaikeba.com/kkb_portal_icon.ico">

    <meta name="description" content="kkb问答">
    <meta name="author" content="__Martin__">
    {% compress css %}
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/kkb.css' %}">
        <link rel="stylesheet" href="{% static  'css/hover-min.css' %}">
        <link rel="stylesheet" href="{% static  'css/monokai.css' %}">
        <link rel="stylesheet" href="{% static  'css/personal_style.css' %}">
        <link rel="stylesheet" href="{% static '/qa/iconfont.css' %}">
        <style>
            html, body {
                height: 100%;
                margin: 0;
            }

            .kkb {
                min-height: 100%;
                margin-bottom: -50px;
                padding-bottom: 30px;
            }

            .footer,
            .push {
                height: 50px;
            }
        </style>

        {% block css %}{% endblock css %}
    {% endcompress %}
    <script src="{% static 'js/vue.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>

    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

</head>
<body style="padding-top: 0px;background-color: whitesmoke;">
{% include 'top.html' %}

{#{% cache 3600 sidebar request.user.username %}#}
<div class="kkb-nav" >
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand hvr-grow-rotate" href="{% url 'articles:list' %}" style="font-size: 1.2em;">
                答疑平台
            </a>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">

                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" href="{% url 'notifications:latest_notifications' %}"
                                            id="notifications" data-toggle="popover" data-title="通知"><i
                            class="fa fa-bell-o" aria-hidden="true"></i></a></li>&nbsp;&nbsp;
                    <li class="nav-item"><a class="nav-link" href="{% url 'articles:list' %}">&nbsp;&nbsp;首页</a>
                    </li>&nbsp;&nbsp;
                    <li class="nav-item"><a class="nav-link" href="{% url 'news:list' %}">动态</a></li>&nbsp;&nbsp;
                    <li class="nav-item"><a class="nav-link" href="{% url 'qa:unanswered_q' %}">问答</a></li>&nbsp;&nbsp;
                    {#                    <li class="nav-item"><a class="nav-link" href="{% url 'messager:messages_list' %}">私信</a></li>&nbsp;&nbsp;#}
                </ul>


                <form role="search" action="{% url 'haystack_search' %}">
                    <div class="input-group">
                        <input name="q" type="search" id="searchInput" class="form-control" placeholder="搜索"
                               aria-label="Search">
                        <div class="input-group-append">
                            <button class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </form>

                {% if request.user.is_authenticated %}
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                {% thumbnail request.user.picture "x40" as im %}
                                    <img src="{{ im.url }}" style="border-radius: 50%;" alt="用户头像"
                                         class="user-image">
                                {% empty %}
                                    <img src="{% static 'img/use.png' %}" height="40px" alt="没有头像"/>
                                {% endthumbnail %}
                                {{ request.user.username }}
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{% url 'users:detail' request.user.username %}">
                                    <i class="fa fa-cogs fa-fw" aria-hidden="true"></i> 个人中心</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{% url 'account_logout' %}">
                                    <i class="fa fa-sign-out fa-fw" aria-hidden="true"></i> 退出</a>
                            </div>
                        </li>
                    </ul>
                {% endif %}
            </div>
        </div>
    </nav>
</div>
{#{% endcache %}#}


<div class="container kkb" id="app">
    {% if messages %}
        {% for message in messages %}
            <div id="messages" class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
    {% block content %}{% endblock content %}
</div>

{% cache 3600 sidebar %}
<div class="footer">
    <nav class="navbar navbar-dark bg-dark mb-0" id="" style="">
        <div class="row col justify-content-center">
            <h3 class="mr-3">
                <a href="" class="hvr-grow no-underline" style="font-size: initial;color: white">
                    关于我们
                </a>
            </h3>
            <h3 class="mr-3">
                <a href="" style="font-size: initial;color: white" target="_blank"
                   class="hvr-grow no-underline">
                    联系我们
                </a>
            </h3>
            <h3 class="mr-3">
                <a href="" style="font-size: initial;color: white" target="_blank"
                   class="hvr-grow no-underline">
                    招聘人才
                </a>
            </h3>
            <h3>
                <a href="" style="font-size: initial;color: white"
                   class="hvr-grow no-underline">
                    关于
                </a>
            </h3>
        </div>

        <div class="row col-12 justify-content-center">
            <div style="text-align: center; color: lightgrey;">
                <p class="mb-0">CopyRight © 2020 北京开课吧科技有限公司 All Rights Reserved</p>
                <p class="mb-0">Powered by
                    <a class="hvr-grow no-underline" href="" target="_blank" style="font-size: smaller;color: white">
                        人工智能学院
                    </a> &amp;
                    <a class="hvr-grow  no-underline" target="_blank" href="" style="font-size: smaller;color: white">
                        后场理工学院

                    </a>
                    <span class="mb-0">&nbsp;京ICP备kaikeba号 010-4009960826</span>
                </p>
            </div>
        </div>
    </nav>
</div>
{% endcache %}

{% compress js %}

    <script src="{% static 'js/popper.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-ui.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/reconnecting-websocket.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/notifications.js' %}" type="text/javascript"></script>
    {% block js %}{% endblock js %}
{% endcompress %}
</body>
</html>
